<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue/vuejs-2.5.16.js"></script>
		<script type="text/javascript" src="js/element/index.js"></script>
		<link rel="stylesheet" type="text/css" href="js/element/index.css" />
		<script type="text/javascript" src="js/axios/axios-0.18.0.js"></script>

		<style type="text/css">
			* {
				margin: 0px;
				padding: 0px;
			}

			body {
				padding: 10px;
			}
		</style>
	</head>

	<body>
		<div id="app">
			<!-- <h3 style="margin: 15px;">用户列表</h3> -->
			<!-- 条件查询开始 -->
			<el-form :inline="true" :model="userCond" class="demo-form-inline">
				<el-form-item label="姓名">
					<el-input v-model="userCond.username" placeholder="请输入姓名"></el-input>
				</el-form-item>

				<el-form-item label="性别">
					<el-radio-group v-model="userCond.gender">
						<el-radio label="nan">男</el-radio>
						<el-radio label="nv">女</el-radio>
					</el-radio-group>
				</el-form-item>

				<el-form-item label="城市">
					<el-select v-model="userCond.city" placeholder="选择城市">
						<el-option label="请选择" value=""></el-option>
						<el-option label="石家庄" value="shijiazhuang"></el-option>
						<el-option label="北京" value="beijing"></el-option>
						<el-option label="上海" value="shanghai"></el-option>
						<el-option label="纽约" value="newYork"></el-option>
					</el-select>
				</el-form-item>

				<el-form-item>
					<el-button type="primary" @click="onSubmit">查询</el-button>
					<el-button type="success" @click="chongzhi">重置</el-button>
					<el-button type="warning" @click="showAddDialog">添加用户</el-button>
					<el-button type="danger" @click="delBatch">批量删除</el-button>
				</el-form-item>
			</el-form>
			<!-- 条件查询结束 -->

			<!-- 列表开始 -->
			<el-table ref="multipleTable" :data="users" @selection-change="handleSelectionChange" style="width: 100%" border
			 stripe>

				<el-table-column type="selection" width="55">
				</el-table-column>

				<el-table-column label="序号" type="index" :index="xuhao" width="80">
				</el-table-column>
				<el-table-column prop="username" label="姓名" width="180">
				</el-table-column>
				<el-table-column prop="gender" label="性别" width="180">
				</el-table-column>
				<el-table-column prop="city" label="城市">
				</el-table-column>
				<el-table-column prop="hobby" label="爱好">
				</el-table-column>

				<el-table-column label="操作">
					<template slot-scope="scope">
						<!-- <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">Edit</el-button>
						<el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">Delete
						</el-button> -->

						<el-button type="primary" icon="el-icon-edit" circle @click="handleEdit(scope.$index, scope.row)"></el-button>
						<el-button type="danger" icon="el-icon-delete" circle @click="handleDelete(scope.$index, scope.row)"></el-button>
					</template>
				</el-table-column>
				</el-table-column>
			</el-table>
			<!-- 列表结束 -->

			<!-- 分页开始 -->
			<p style="text-align: center;">
				<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page"
				 :page-sizes="[2,5,10,20,100, 200, 300, 400]" :page-size="size" layout="total, sizes, prev, pager, next, jumper"
				 :total="total">
				</el-pagination>
			</p>
			<!-- 分页结束 -->


			<!-- 添加或新增dialog开始 -->
			<el-dialog :close-on-click-modal="false" :title="user.id == null?'新增用户':'修改用户'" :visible.sync="dialogFormVisible">

				<el-form :model="user" label-width="100px">
					<el-form-item label="姓名">
						<el-input v-model="user.username"></el-input>
					</el-form-item>

					<el-form-item label="靓照">
						<el-upload 
						class="avatar-uploader"
						action="http://localhost/file/upload" 
						:show-file-list="false"
						:on-success="handleAvatarSuccess" 
						:before-upload="beforeAvatarUpload">
						<img v-if="user.picurl" :src="user.picurl" class="avatar">
						<i v-else class="el-icon-plus avatar-uploader-icon"></i>
						</el-upload>
					</el-form-item>

					<el-form-item label="性别">
						<el-radio-group v-model="user.gender">
							<el-radio label="nan">男</el-radio>
							<el-radio label="nv">女</el-radio>
						</el-radio-group>
					</el-form-item>

					<el-form-item label="爱好">
						<el-checkbox-group v-model="user.hobby">
							<el-checkbox label="basketball">篮球</el-checkbox>
							<el-checkbox label="music">音乐</el-checkbox>
							<el-checkbox label="dance">跳舞</el-checkbox>
							<el-checkbox label="football">足球</el-checkbox>
						</el-checkbox-group>
					</el-form-item>

					<el-form-item label="城市">
						<el-select v-model="user.city" placeholder="请选择城市">
							<el-option label="石家庄" value="shijiazhuang"></el-option>
							<el-option label="北京" value="beijing"></el-option>
							<el-option label="上海" value="shanghai"></el-option>
							<el-option label="newYork" value="newYork"></el-option>
						</el-select>
					</el-form-item>

					<el-form-item label="介绍">
						<el-input type="textarea" v-model="user.introduce"></el-input>
					</el-form-item>

					<el-form-item>
						<el-button type="primary" @click="addUser">{{user.id == null?'立即添加':'立即修改'}}</el-button>
						<el-button v-show="user.id == null" @click="chongzhiAdd">重置</el-button>
					</el-form-item>
			</el-dialog>
			<!-- 添加或新增dialog结束 -->
		</div>
	</body>

	<script type="text/javascript">
		new Vue({
			el: "#app",
			data: {
				users: [],
				page: 1,
				size: 10,
				total: 0,

				userCond: {
					
				},

				user: {
					picurl:"",
					hobby: []
				},
				dialogFormVisible: false,
				ids: [],
				isAdd:true,
			},

			created() {
				this.huoqu();
			},

			methods: {
				xuhao(index) {
					return (this.page - 1) * this.size + index + 1;
				},
				async huoqu() {
					//var result = await axios.get("http://localhost:8081/aaa/user/list");
					var {
						data
					} = await axios.post(`http://localhost:80/user/findByPageandCond/${this.page}/${this.size}`, this.userCond);
					if (data.code == 2000) {
						this.users = data.data.records;
						this.total = data.data.total;
					}

				},
				handleSizeChange(size) {
					//每页显示条数发生改变触发
					this.size = size;
					this.page = 1;
					this.huoqu();

				},

				handleCurrentChange(current) {
					this.page = current;
					this.huoqu();

				},

				onSubmit() {
					//alert(this.userCond)
					this.huoqu();
				},
				chongzhi() {
					this.userCond = {};
				},

				async handleEdit(i, obj) {
					this.showAddDialog();
					this.isAdd = false;
					var {
						data
					} = await axios.get(`http://localhost/user/${obj.id}`);
					if (data.code == 2000) {
						this.user = data.data;
					}

				},
				handleDelete(i, obj) {
					this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}).then(() => {
						this.delUser(obj);
					})
				},

				async delUser(obj) {
					var {
						data
					} = await axios.delete(`http://localhost/user/${obj.id}`);
					if (data.code == 2000) {
						this.page = 1;
						this.huoqu();
						
					}
				},

				showAddDialog() {
					this.isAdd = true;
					this.chongzhiAdd();
					this.dialogFormVisible = true;
				},

				async addUser() {
					this.dialogFormVisible = false;
					var {
						data
					} = await axios.post(`http://localhost/user`, this.user);
					if (data.code == 2000) {
						if (this.user.id == null) {
							this.page = 1;
						}
						this.huoqu();
						this.$message({
							message: '成功',
							type: 'success'
						});
					}
				},

				/* async updateUser() {
					//console.log(this.user);
					this.dialogFormVisible = false;
					var {
						data
					} = await axios.put(`http://localhost:8081/aaa/user`, this.user);
					if (data.code == 2000) {
						this.$message({
							message: '恭喜你，修改用户成功',
							type: 'success'
						});
					}
				},
				*/
				chongzhiAdd() {
					this.user = {
						picurl:"",
						hobby: []
					}
				},

				async delBatch() {
					//console.log(this.ids);
					if (this.ids.length == 0) {
						this.$message("你没有选择任何用户");
					} else {
						var {
							data
						} = await axios.post(`http://localhost/user/batch`, this.ids);
						this.ids = [];
						if (data.code == 2000) {
							this.huoqu();
						}
					}
				},

				handleSelectionChange(val) {
					//console.log(this.$refs.multipleTable.selection);
					this.ids = [];
					var arr = this.$refs.multipleTable.selection;

					for (var i = 0; i < arr.length; i++) {
						var user = arr[i];
						this.ids.push(user.id);
					}
				},

				async handleAvatarSuccess(resp) {
					//文件上传完成执行
					if (this.user.picurl && this.isAdd) {
						//删除
						//var param ={"fileUrl":this.user.picurl};
						const data = new FormData()
						data.append('fileUrl', this.user.picurl)
						await axios.post(`http://localhost/file/delete`, data);
					}
					this.isAdd = true;
					this.user.picurl = resp.data;
				},

				beforeAvatarUpload(file) {
					//开始上传文件之前执行
					const isJPG = file.type === 'image/jpeg';
					const isLt2M = file.size / 1024 / 1024 < 2;

					if (!isJPG) {
						this.$message.error('上传头像图片只能是 JPG 格式!');
					}
					if (!isLt2M) {
						this.$message.error('上传头像图片大小不能超过 2MB!');
					}
					return isJPG && isLt2M;
				}
			}
		})
	</script>
</html>
